<script setup>
import { ref } from 'vue'
import StageItem from './StageItem.vue'
import stagedata from '../../data/StageData.json'
import configdata from '../../data/StageConfigData.json'
import challengedata from '../../data/StageChallengeData.json'
import jsonToMap from '../../j2m.js'
import { getText, getParsedText } from '../../store/txtstore.js'

const stageData = jsonToMap(stagedata.data)
const configData = jsonToMap(configdata.data)
const challengeData = jsonToMap(challengedata.data)
const props = defineProps(['group', 'groupKey'])

const stages = ref([])
let gradedata;
if (props.group == 20) {
    import('../../data/CashGradeData.json').then(result => {
        gradedata = result
        loadData()
    })
} else {
    loadData()
}

function loadData() {
    for (const [stageId, data] of stageData) {
        if (
            data[46] &&
            data[props.groupKey] == props.group &&
            (data[14] || props.group == 20)
        ) {
            const config = configData.get(data[26])
            const stage = {
                id: stageId,
                number: getText(data[3][1]),
                title: getText(data[4][1]),
                introduction: getParsedText(data[5][1]),
                condition: getParsedText(data[6][1]),
                level: data[7] || data[29],
                dropExp: data[9] || data[10],
                exp: data[68] || 0,
                stamina: data[73] || 0,
                enemy: Array.isArray(config?.[4]) ? config[4] : (config?.[4] ? [config[4]] : undefined)
            }
            if (Array.isArray(data[14])) {
                stage.challenge = data[14].map(id => getText(challengeData.get(id)[6][1]))
            } else if (data[14]) {
                stage.challenge = [getText(challengeData.get(data[14])[6][1])]
            }
            if (data[15]) {
                stage.reward = Array.isArray(data[15]) ? data[15].map(obj => [obj[1], obj[2]]) : [Object.values(data[15])]
            }
            if (data[19]) {
                stage.drop = Array.isArray(data[19]) ? data[19].map(obj => [obj[1], obj[2]]) : [Object.values(data[19])]
            }
            if (gradedata) {
                if (stage.level < 23) {
                    continue
                }
                const grade = stageId - (data[2] * 100)
                const drops = []
                const grades = []
                for (let i = 4 * grade - 3; i < 4 * grade + 1; i++) {
                    if (gradedata.data[i]?.[7]) {
                        drops.unshift([gradedata.data[i][7][1], gradedata.data[i][7][2]])
                        grades.push(gradedata.data[i][5])
                    } else {
                        return
                    }
                }
                stage.drop = drops
                stage.grade = grades
            }
            stages.value.push(stage)
        }
    }
}
</script>

<template>
    <main>
        <StageItem v-for="stage of stages" :data="stage" />
    </main>
</template>

<style scoped>
main {
    display: grid;
    row-gap: 0.5em;
}
</style>